<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <table border="1" id="box" style="font-size: 1px;">
            <thead>
                <tr>
                    <th id="header" colspan="2"></th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</body>
<script>
    // 将返回的数据 显示到表格中 表头：宝岛眼镜 和 表身体

    let httpAjax = new XMLHttpRequest();
    //声明的变量 值改变            函数
    httpAjax.onreadystatechange = function () {
        //判断 声明的变量 就绪状态 
        if (httpAjax.readyState == 4 && httpAjax.status == 200) {
            let res = JSON.parse(httpAjax.responseText)
            // res.data.forEach ((item) => {
            //     // let th = document.createElement('th')
            //     // th.innerHTML = item.title
            //     // box.appendChild(th)

            //     let td = document.createElement('td')
            //     td.innerHTML = item.title
            //     box.appendChild(td)
            // })

            if (res.code == 0) {
                document.getElementById('header').innerHTML = res.msg
                var str = ''
                for (let i in res.data) {
                    str += `
                                <tr>
                                     <td>${+i + 1}</td>
                                     <td>${res.data[i].title}</td>
                                </tr>
                                `
                }
                document.getElementsByTagName('tbody')[0].innerHTML=str
            } 
        }
        // else{
        //         alert('q')
        //     }
    }
    httpAjax.open('GET', 'http://liu.zzgoodqc.cn/hello?times=1', true)
    httpAjax.send()


</script>
<style>

</style>

</html>